<template>
	<view>
		<uv-upload v-if="fileList.length < max" :file-list="fileList" name="file" :multiple="multiple" :max-count="max"
			width="630" height="auto" @after-read="afterRead">
			<uv-button :color="bgColor" :icon="icon ? icon : iconUplaod" icon-color="#fff"
				:icon-size="icon ? '40rpx' : '28rpx'" :text="text" custom-style="width: 630rpx" />
		</uv-upload>
		<view v-if="fileList.length > 0" class="img-list">
			<view v-for="(item, index) in fileList" :key="index" class="img-item">
				<view class="img-del" v-if="item.status == 'success'" @click="deletePic(index)">
					<uv-icon name="close" color="#fff" />
				</view>
				<image :src="item.fullPath" mode="aspectFill" @click="previewImage(item)" />
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		watch
	} from "vue";
import { webSrc } from "@/common/mothed.js";
	import {
		commonUpload
	} from "@/request/common.js";
	import iconUplaod from "@/static/login/icon_uplaod.png";
	const props = defineProps({
		// 上传图片
		value: {
			type: [Array, String],
			default: [],
		},
		// 多图上传
		multiple: {
			type: Boolean,
			default: false,
		},
		// 图标
		icon: {
			type: String,
			default: "",
		},
		// 按钮文字
		text: {
			type: String,
			default: "上传",
		},
		// 背景色
		bgColor: {
			type: String,
			default: "#4EA770",
		},
		// 最大上传数
		max: {
			type: [Number, String],
			default: 1,
		},
	});

	const fileList = ref([]); // 文件列表
	const emit = defineEmits(["update:value", "change"]);

	watch(
	  props,
	  (v) => {
	    fileList.value = props.value.map(i=>{
				return {
					status: "success",
					message: "",
					url: i,
					fullPath: webSrc(i),
				}
			});
	  },
	  { immediate: true, deep: true }
	);

	// 删除图片
	const deletePic = (index) => {
		uni.showModal({
			title: "提示",
			content: "确定是否删除？",
			showCancel: true,
			success: ({
				confirm,
				cancel
			}) => {
				if (confirm) {
					fileList.value.splice(index, 1);
					emit(
						"update:value",
						fileList.value.map((i) => i.url)
					);
					emit("change", fileList.value);
				}
			},
		});
	};

	// 预览图片
	const previewImage = (item) => {
		uni.previewImage({
			urls: fileList.value.map((i) => i.fullPath),
			current: item.fullPath,
		});
	};

	// 新增图片
	const afterRead = async (e) => {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let list = [].concat(e.file);
		let len = fileList.value.length;
		list.map((item) => {
			fileList.value.push({
				...item,
				status: "uploading",
				message: "上传中",
			});
		});
		for (let i = 0; i < list.length; i++) {
			const result = await uploadFilePromise(list[i].url);
			let data = fileList.value;
			fileList.value.splice(
				len,
				1,
				Object.assign(data[len], {
					status: "success",
					message: "",
					url: result.fileName,
					fullPath: result.url,
				})
			);
			len++;
		}
		emit(
			"update:value",
			fileList.value.map((i) => i.url)
		);
		emit("change", fileList.value);
	};

	// 上传凭证图片
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			commonUpload(url).then((res) => {
				if (res.code == 200) {
					setTimeout(() => {
						resolve(res);
					}, 1000);
				}
			});
		});
	};
</script>
<style lang="scss" scoped>
	.img-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		width: 630rpx;
		margin-top: 20rpx;

		.img-item {
			position: relative;
			height: 200rpx;
			overflow: hidden;
			border-radius: 8rpx;
			background: rgba(0, 0, 0, 0.1);

			.img-del {
				position: absolute;
				top: 0;
				right: 0;
				width: 42rpx;
				height: 42rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 0 8rpx 0 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>